@import 'base';
.display-flex{
  display:flex;
  justify-content: space-around;
}
span{
  display:inline-block;
}
.border-bottom{
  border-bottom:1px solid @item-border-bottom;
}
.container{
  background-color:#fff;
  font-size:15px;
  .nav{
    .border-bottom;
    .display-flex;
    position:fixed;
    top:0;
    left:0;
    background-color:#fff;
    z-index:100;
    width:100%;
    padding:12px 0;
    color:@nav-default-color;
    span{
      position:relative;
      &.active{
        color:@nav-active-color;
      }
      &.has-icon{
        padding-right:15px;
        &:before,&:after{
          position:absolute;
          content:'';
          right:0px;
          bottom:1px;
          width:@width-height-percent*6px;
          height:6px;
          background-image:url(../img/icon_yallow_downward.png);
          background-size:cover;
        }
        &:before{
          transform:rotate(180deg);
          top:1px;
        }
        &.active:before{
          background-image:url(../img/icon_yallow_upward.png);
          transform:rotate(0deg);
        }
      }
    }
  }
  .item-wrap{
    margin-top:45px;
    padding:0px 0 0px 16px;
    .item{
      .border-bottom;
      .display-flex;
      padding:18px 0;
      .item-img{
        position:relative;
        width:25vw;
        display:flex;
        align-items: center;
        img{
          width:100%;
          vertical-align: top;
        }
        .state{
          position:absolute;
          left:0;
          top:0;
          width:40px;
          height:20px;
          line-height:20px;
          text-align:center;
          color:#fff;
          font-size:12px;
          border-bottom-right-radius:10px;
          background-image: linear-gradient(-116deg, @gradual-color-tow 5%, @gradual-color-one 100%);
        }
      }
      .item-con{
        position:relative;
        width:63vw;
        margin-left:10px;
        padding-right:12px;
        .item-title{
          .display-flex;
          height:30px;
          align-items: center;
          justify-content: flex-start;
          p{
            max-width:70%;
            height:20px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            font-weight:bold;
          }
          span{
            margin-left:5px;
            position:relative;
            color:@item-tip-color;
            background: #4F5159;
            border: 1px solid #4F5159;
            border-radius: 0 2px 2px 2px;
            height:15px;
            line-height:15px;
            &:before{
              position:absolute;
              content:'';
              left:-6px;
              top:-1px;
              width:0px;
              height:0px;
              border-width:4px 5px;
              border-style:solid;
              border-color:transparent;
              border-top-color:#4F5159;
            }
          }
        }
        .item-bar{
          .bar-con{
            position:relative;
            width:75%;
            height:6px;
            background: @item-bar-default;
            border-radius: 100px;
            .bar-con-i{
              position:absolute;
              left:0px;
              top:0px;
              width:20%;
              height:100%;
              background-color:@item-bar-active;
              border-radius: 100px;
          }
          }
          .bar-percent{
            padding-left:5px;
            color:@item-bar-percent;
          }
        }
        .item-num{
          font-size:13px;
          color:@item-num-color;
          .all{
            margin-right:10px;
          }
          .join{

          }
        }
        .item-btn{
          margin-top: 5px;
          button{
            background: @item-btn-color;
            box-shadow: 0 1px 0 0 #C7965A, 0 2px 4px 0 #EFCEA4, 0 2px 9px 0 rgba(203,160,104,0.71);
            border-radius: 100px;
            color:#fff;
            border:none;
            padding:4.5px 21px;
          }
        }
      }
    }
  }
}